define (require)->
    require('../common.scss')
    require('./demo2.scss')
    
    $ = require('jquery')
    focus = require('./focus.coffee')
    focus.init()

    $view = $ require('./demo2.jade')()
    $container = $('.container')

    time = null;

    eo = {}

    eo.show = ->
        $container.empty()
        $container.append $view

        $direction = $('.direction')
        moving = false
        $direction.on 'click', ->
            return if moving
            moving = true
            $this = $ this
            action = $this.attr('target')
            focus.move action
            moving = false

        $('[class*="focus-l-"]').on 'click', ->
            $('.focus').removeClass('focus').blur()
            $this = $ this
            $this.addClass('focus')
            $this.focus()

        document.onkeydown =(e)->
            if e
                key = switch e.keyCode
                    when 37 then 'left'
                    when 38 then 'up'
                    when 39 then 'right'
                    when 40 then 'down'
                $("[target=#{key}]").click()

        $showAuto = $('.show-auto')
        $showAuto.on 'click', ->
            $this =  $ this
            button = $this.data('on') || false
            if time && button
                $this.data('on', false)
                clearInterval(time)
            else
                $this.data('on', true)
                time = setInterval((->$direction.click()), 1)

    eo